<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div id="app">
    <h2 v-html="salary"></h2>
    <input type="text" v-model="salary">
    <p v-html="salary"></p>
  </div>

  <script type="text/javascript">
      var data = {
        salary:15000
      }
      // 目标: 写出构造器的基本架子，
          // 1. 完成参数传递与获取
          // 2. 实现数据拦截
          //   (1) 在代码外部，让实例能够操作data选项中的数据
          //   (2) 在代码内部，通过this.XXX来访问data选项中的属性值
      function MVVM (options) {
        // 用解构赋值，取出配置项中内容
        let {el, data} = options
        console.log(data)

        // 对data中所有的可枚举属性进行循环
        for(let key in data) {
          console.log(key)
          // 在构造器内部，this就会指向当前实例对象
          Object.defineProperty(this, key, {
            get () {
              console.log('get', key)
              return data[key]
            },
            set ( val ) {
              if (val != data[key]) {
                data[key] = val
              }
            }
          })
        }

        console.log(this.salary)
      }
      var vm = new MVVM({
          el:"#app",
          data
      })
      // console.log( vm.salary )
  </script>
</body>
</html>